/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
	--color-base: #252525;
	--ifm-color-gray-0: var(--ifm-color-white);
	--ifm-color-gray-100: #f5f5f5;
	--ifm-color-gray-200: #ebebeb;
	--ifm-color-gray-300: #dadada;
	--ifm-color-gray-400: #cccccc;
	--ifm-color-gray-500: #bebebe;
	--ifm-color-gray-600: #8d8d8d;
	--ifm-color-gray-700: #606060;
	--ifm-color-gray-800: #444444;
	--ifm-color-gray-900: #1c1c1c;
	--ifm-color-gray-1000: var(--ifm-color-black);
	--ifm-color-primary: #0094a9;
	--ifm-color-primary-dark: #008598;
	--ifm-color-primary-darker: #007e90;
	--ifm-color-primary-darkest: #006876;
	--ifm-color-primary-light: #00a3ba;
	--ifm-color-primary-lighter: #00aac2;
	--ifm-color-primary-lightest: #00c0dc;
	--ifm-font-color-base: var(--color-base);
	--ifm-heading-color: var(--color-base);
	--ifm-button-color: var(--color-base);
	--ifm-hero-text-color: var(--color-base);
	--ifm-link-hover-color: var(--ifm-color-primary-lightest);
	--ifm-font-family-base: 'Open Sans', Helvetica, sans-serif;
	--ifm-heading-font-weight: normal;
	--ifm-button-color: var(--ifm-color-primary);
	--ifm-button-background-color: var(--ifm-color-white);
	--ifm-button-border-color: var(--ifm-color-primary);
	--ifm-button-border-radius: 3px;
	--ifm-button-font-weight: normal;
	--ifm-button-padding-vertical: 0.5rem;
	--ifm-link-decoration: underline;
	--ifm-navbar-background-color: var(--ifm-color-primary);
	--ifm-navbar-link-color: var(--ifm-color-white);
	--ifm-navbar-link-hover-color: var(--ifm-color-gray-300);
	--ifm-navbar-search-input-background-color: var(--ifm-color-gray-100);
	--ifm-menu-color-background-hover: rgba(0, 0, 0, 0.15);
	--ifm-footer-background-color: var(--ifm-color-primary-darkest);
	--ifm-footer-color: var(--ifm-color-gray-300);
	--ifm-footer-title-color: var(--ifm-color-gray-300);
	--ifm-footer-link-color: var(--ifm-color-white);
	--ifm-footer-link-hover-color: var(--ifm-color-gray-300);
	--ifm-h1-font-size: 2.4rem;
	--ifm-h2-font-size: 1.8rem;
	--ifm-h3-font-size: 1.4rem;
	--ifm-h4-font-size: 1.2rem;
}

.DocSearch-Button.DocSearch-Button {
	--docsearch-muted-color: var(--ifm-color-gray-600);
	--docsearch-key-gradient: transparent;
	--docsearch-key-shadow: 0 0 0 1px var(--docsearch-muted-color);
	--docsearch-searchbox-shadow: 0 0 0 2px var(--ifm-navbar-background-color),
		0 0 0 4px var(--ifm-button-background-color);

	border-radius: var(--ifm-button-border-radius);
}
.DocSearch-Button-Key.DocSearch-Button-Key {
	padding: 0;
}

a:focus {
	outline: solid 2px;
	outline-offset: 2px;
}

video {
	max-width: 100%;
}

.button:hover,
.button:active,
.button:focus {
	color: var(--ifm-link-hover-color);
	border-color: var(--ifm-link-hover-color);
}
.button:focus {
	box-shadow: 0 0 0 2px var(--ifm-button-background-color), 0 0 0 4px var(--ifm-link-hover-color);
}

.docusaurus-highlight-code-line {
	background-color: rgb(72, 77, 91);
	display: block;
	margin: 0 calc(-1 * var(--ifm-pre-padding));
	padding: 0 var(--ifm-pre-padding);
}

/* Colors from https://getbootstrap.com/docs/4.5/components/alerts/ */
.alert--secondary {
	--ifm-alert-color: #383d41;
	--ifm-alert-background-color: #e2e3e5;
	--ifm-alert-border-color: #d6d8db;
}
.alert--info {
	--ifm-alert-color: #0c5460;
	--ifm-alert-background-color: #d1ecf1;
	--ifm-alert-border-color: #bee5eb;
}
.alert--success {
	--ifm-alert-color: #155724;
	--ifm-alert-background-color: #d4edda;
	--ifm-alert-border-color: #c3e6cb;
}
.alert--warning {
	--ifm-alert-color: #856404;
	--ifm-alert-background-color: #fff3cd;
	--ifm-alert-border-color: #ffeeba;
}
.alert--danger {
	--ifm-alert-color: #721c24;
	--ifm-alert-background-color: #f8d7da;
	--ifm-alert-border-color: #f5c6cb;
}
.alert {
	--ifm-heading-color: var(--ifm-alert-color);
	--ra-admonition-icon-color: var(--ifm-alert-color);
}
.alert h5 {
	font-weight: bold;
}
.alert code {
	padding: 0;
	color: inherit;
	background-color: transparent;
}

/* Fix missing empty lines in code examples */
.token-line {
	min-height: 1.25rem;
}

@media (max-width: 996px) {
	.row .col.col.col + .col.col.col {
		margin-top: 1rem;
		order: initial;
	}
}

.navbar__brand {
	text-decoration: none;
}
.navbar__brand:hover {
	color: var(--ifm-navbar-link-hover-color);
}
.navbar__toggle {
	color: var(--ifm-navbar-link-color);
}
.navbar__toggle:hover {
	color: var(--ifm-navbar-link-hover-color);
}
.navbar__toggle:focus {
	outline: 1px dotted;
}

.menu__link {
	text-decoration: none;
}
.navbar-sidebar .menu__link {
	--ifm-menu-color: var(--ifm-color-white);
}

.footer a:link,
.footer a:visited {
	color: var(--ifm-footer-link-color);
}
.footer a:hover,
.footer a:active,
.footer a:focus {
	color: var(--ifm-footer-link-hover-color);
}
